<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="ajax_chat.css" />
<link rel="stylesheet" type="text/css" media="print, projection, screen" href="js/jgrowl/jquery.jgrowl.css"   />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sound.js"></script>
<script type="text/javascript" src="js/jgrowl/jquery.jgrowl_minimized.js"></script>




<script type="text/javascript" charset="utf-8">

var ABOUT_THIS = '<?php p($chat->name)?>';
var CLR_MSG = "<?php p(get_string('clearmsg','chat'))?>";
var REFRESH_ALL_MSG = "<?php p(get_string('refreshallmsg','chat'))?>";
var SOUND_OFF_MSG = "<?php p(get_string('soundoffmsg','chat'))?>";
var SOUND_ON_MSG = "<?php p(get_string('soundonmsg','chat'))?>";
var ALERT_MSG = '<?php p(get_string("newmsgalert","chat"))?>';
var PRIVATE_MSG_TIME = <?php p($privatemsgtime)?>;
var MSG_REFRESH_RATE = <?php p("$msgsrefreshtimes")?>;
var USER_ID = <?php p($USER->id)?>;
var ID = <?php p("$id");?>;
var TYPE_ERRO = '<?php p(TYPE_ERRO)?>';
var TYPE_EXIT = '<?php p(TYPE_EXIT)?>';
var TYPE_MESSAGE = '<?php p(TYPE_MESSAGE)?>';
var TYPE_NO_MESSAGE = '<?php p(TYPE_NO_MESSAGE)?>';
var TYPE_ENTER = '<?php p(TYPE_ENTER)?>';

function loadMsgInput(){
	$("#editing").submit(function() { 
		// do validation.. if you want and then post it. 
			$.post("chatcontroller.php?rand="+Math.random(), $(this).serialize(), function(data) {
				$("#message").val("");
				getMesseges();
    		}); 
		return false; 
	});
	$("#exitbtn").click(function(){
		$.post("chatcontroller.php?rand="+Math.random(), {id: ID,  action: "exit"}, function(data) {
			window.close();
		});
	});
}

function loadMenu() {
	$('li.clear').click(function(){
		$('#messages table').empty();
		$.jGrowl(CLR_MSG);
	});

	$('li.about').click(function(){
		$.jGrowl(ABOUT_THIS);
	});

	
	$('li.refreshall').click(function(){
		loadUserList();
		loadParticipants();
		loadMsgWindow();
		$.jGrowl(REFRESH_ALL_MSG);
		$.sound.play('sounds/refresh.wav',{timeout: 2500});
	});

	$('li.soundsoff').click(function(){
		$.sound.enabled = false;
		$.jGrowl(SOUND_OFF_MSG);
	});

	$('li.soundson').click(function(){
		$.sound.enabled = true;
		$.jGrowl(SOUND_ON_MSG);
		$.sound.play('sounds/bell.wav',{timeout: 1000});
	});
	$('#message').focus();
}

function loadUserList() {
	 $("#userse").load("chatcontroller.php?rand="+Math.random()+"&id="+ID+"&action=participantslist");
}

function loadParticipants() {
	$("#participants ul").load("chatcontroller.php?rand="+Math.random()+"&id="+ID+"&action=participants");
}

function getMesseges(){
	$.post('chatcontroller.php?rand='+Math.random(), {id: ID,  action: "refresh"}, function(data){
		var msgs=$.parseJSON(data)
		for (var i in msgs){
			var msg=msgs[i];
			if (msg.type == TYPE_NO_MESSAGE) {
				continue;
			}
			if (msg.type==TYPE_ENTER) {
				loadParticipants();
				loadUserList();
				$.sound.play('sounds/door.wav',{timeout: 3000});
			} else if (msg.type==TYPE_EXIT) {
				loadParticipants();
				loadUserList();
				$.sound.play('sounds/door_close.wav',{timeout: 4000});
			} else if (msg.type==TYPE_ERRO) {
					//do something
			} else if (msg.type == TYPE_MESSAGE) {
				if (msg.to == -1) {
					//$(msg.html).prependTo('#messages'); 
					$(msg.html).appendTo('#messages');
					$.sound.play('sounds/push.wav',{timeout: 500});
				} else if (msg.from == USER_ID) {
					$(msg.html).appendTo('#messages');
					$.sound.play('sounds/push.wav',{timeout: 500});
				} else if (msg.to == USER_ID) {
					var header='<span class="privatemsg">'+ALERT_MSG+'</span>'
					if (PRIVATE_MSG_TIME == 0 ){
						$.jGrowl(msg.picture+msg.text,{header: header, sticky: true });
					} else {
						$.jGrowl(msg.picture+msg.text,{header: header, life: PRIVATE_MSG_TIME });
					}
					$.sound.play('sounds/bell.wav',{timeout: 1000});
				}
			}
		}
		$("#messages").attr({ scrollTop: $("#messages").attr("scrollHeight") - $('#messages').height() });
		$('#message').focus(); 
	});
}

function loadMsgWindow() {
	$("#messages").load("chatcontroller.php?id="+ID+"&action=init&randval="+ Math.random(), function(){});
}



$(document).ready(function() {
	loadMsgInput();
	loadMenu();
	loadParticipants();
	loadUserList();
	loadMsgWindow();
	var refreshId = setInterval(function(){getMesseges()}, MSG_REFRESH_RATE );
});

</script>
</head>

<body>
<div id="mod-chat-gui_basic" >
	<div id="mychathead"><?php p("$chatsn: $chatsnn")?></div>
    <div id="chatops">
    	<ul>
    		<li class="about"><?php p(get_string('about','chat'))?></li>
    		<li class="clear"><?php p(get_string('clear','chat'))?></li>
    		<li class="refreshall"><?php p(get_string('refreshall','chat'))?></li>
    		<li class="soundson"><?php p(get_string('soundson','chat'))?></li>
    		<li class="soundsoff"><?php p(get_string('soundsoff','chat'))?></li>
	    </ul>
    </div>
	<div id="messages" >
    	<h1><?php p(get_string("messages", "chat"))?></h1>
	</div>
	<h1><?php p(get_string("participants"))?></h1>
	<div id="participants" class="johnspart"><ul></ul></div>
	<br style="clear: both">
	<div id="send" >
		<form id="editing" method="post" action="chatcontroller.php?rand="+Math.random()">
    	<div id="mbox">
			<?php p(ucfirst(get_string("to","chat")))?>:&nbsp;<select id="userse" name="pname"></select>
			<input type="text" id="message" name="message" value="<?php s($refreshedmessage, true)?>" size="45" />
			<input type="hidden" name="id" value="<?php p("$id")?>" />
			<input type="hidden" name="action" value="message" />
			<input type="hidden" name="groupid" value="<?php p("$groupid")?>" />
			<input type="hidden" name="last" value="<?php p(time())?>" />
			<input type="hidden" name="sesskey" value="<?php p("$USER->sesskey")?>" />
			<input id="sendbtn" type="submit" value="<?php p(get_string("submit"))?>" />&nbsp;
			<input id="exitbtn" type="button" value="<?php p(get_string("exit","chat"))?>" />&nbsp;
   		</div>
    	</form>
   </div>
 </div>
 </body>
</html>